<template>
  <div class="home">
    <div class="container">
      <p class="title">IOB-KG知识图谱</p>
      <div>
        <el-button class="btn" @click="jumpToKgQA">COVID19知识问答</el-button>
      </div>
      <div>
        <el-button class="btn" @click="jumpToKgBuilder">我的知识图谱</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import global from "@/global";
export default {
  name: "Home",
  components: {},
  methods: {
    jumpToKgBuilder(){
      let user = global.getUser();
      if(user == null){
        this.$router.push({ path: "/identify"});  //尚未登陆
      }
      else {
        this.$router.push({ path: "/kgbuilder"});
      }
    },
    jumpToKgQA(){
      // alert("尚未完成")
      this.$router.push({path: "/kgQA"});
    }
  }
}
</script>
<style scoped>
.home {
  width: 1000px;
  margin: 1% auto 0;
  border-radius: 15px;
  overflow: hidden;
  padding: 30px;
}

.home .container {
  display: inline-grid;
  width: 80%;
  height: 80%;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #ccc;
  border-radius: 5px;
  padding: 20px;
  margin: 30px auto;
}

.home .container .btn {
  font-size: 20px;
  width: 50%;
  padding: 20px;
  margin-bottom: 20px;
}

.home .container .title {
  line-height: 300%;
  font-size: 32px;
  color: #666;
  padding-left: 10px;
  text-align: center;
}

</style>
